import React, { useState, useCallback, useEffect } from 'react';
import { Modal, Form, Input, Tabs, DatePicker, Checkbox, Button, Select,Radio, Table,Divider} from 'antd';
import styles from './style.less';

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
}
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const {Option} = Select;


const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onCancel } = props;
  const [dataSource,setDataSource] = useState([])
  const [isShowSelectClassWindow, setIsShowSelectClassWindow] = useState<boolean>(false);
  const [step, setStep] = useState<string>('1');
  const columns  = [
    {
      title: '实习项目名称',
      dataIndex: '',
    },
    {
      title: '项目ID',
      dataIndex: '',
    },
    {
      title: '创建人',
      dataIndex: '',
    }, 
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <>
          <a 
            // onClick={()=>{handleExamine()}}
          >查看</a> 
          <Divider type="vertical" />  
          {/* {record.name} */}
          <a 
          onClick={() => handleEdit(record)}
          >编辑 </a>
          <Divider type="vertical" /> 
          <a 
          // onClick={() => handleDelete(record)}
          >删除</a>
         
        </>
      ),
    },
  ];
  
  const handlevisible = () => {
    onCancel();
  };
  const handleEdit =()=>{

  }
  const handleShowSelectClassGroup = () => {
    setIsShowSelectClassWindow(true);
  };
  const handleHidden = useCallback(() => {
    setIsShowSelectClassWindow(false);
  }, []);

  const handleSelectClass = useCallback((values) => {
    console.log(values);
  }, []);

  const handleNext = (value: string) => {
    setStep(value);
  };

  const handleChangeTab = (value: string) => {
    setStep(value);
  };


  // useEffect(() => {
  //   (async()=>{
  //     await getSelectProjectItemList()
  //   })()
  // }, [])



  return (
    <Modal
      destroyOnClose
      title="新建规则"
      visible={modalVisible}
      onCancel={handlevisible}
      footer={null}
    >
      <Tabs activeKey={step} onChange={handleChangeTab}>
        <TabPane key="1" tab="实习计划">
          <Form>
            <Form.Item label="计划名称"   rules={[{ required: true, message: '必选！' }]}> 
              <Input placeholder="请输入内容" />
            </Form.Item>
            <Form.Item label="选择课程"   rules={[{ required: true, message: '必选！' }]}>
              {/* <div className={styles.selectWrapper} onClick={handleShowSelectClassGroup} /> */}
              <Select>
                <Option ></Option>
              </Select>
              {/* <SelectClassWindow
                visible={isShowSelectClassWindow}
                onCancel={handleHidden}
                onOk={handleSelectClass}
              /> */}
            </Form.Item>
            <Form.Item label="参与班级"   rules={[{ required: true, message: '必选！' }]}>
              {/* <div className={styles.selectWrapper} onClick={handleShowSelectClassGroup} /> */}
              <Select>
                <Option ></Option>
              </Select> 
            </Form.Item>
            <Form.Item name="time" label="实习时间">
              <RangePicker style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="teacher" label="实习负责老师 ">
            <Select>
                <Option ></Option>
              </Select> 
            </Form.Item>
            <Form.Item>
              <div className={styles.stepOneAction}> 
                <Button onClick={() => handleNext('2')} type="primary" className={styles.next}>
                  下一步
                </Button>
              </div>
            </Form.Item>
          </Form>
        </TabPane>
        <TabPane key="2" tab="实习要求">
          <Form>
            <Form.Item>
              <Checkbox>签到</Checkbox>
              <Checkbox>日志</Checkbox>
              <Checkbox>周志</Checkbox>
              <Checkbox>月志</Checkbox>
              <Checkbox>实习报告</Checkbox>
            </Form.Item>
            <div>
              <span>签到</span>
              <Form.Item label="签到方式">
              <Checkbox>上下班签到</Checkbox>
              <Checkbox>每日签到一次</Checkbox>
            </Form.Item>
            </div>
            <div className={styles.log}> 
              <h3>日志</h3>
              <Form.Item > 
                  <span>字数限制:不少于<Input/>字</span>
              </Form.Item>
              <Form.Item>
                <span>篇数限制:每
                  <Select size='small'>
                    <Option value='天'>天</Option>
                    <Option value='周'>周</Option>
                    <Option value='月'>月</Option>
                  </Select>
                  至少提交<Input/>篇
                  </span>
              </Form.Item>
              <Form.Item label='评语'>
              <Radio.Group >
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio> 
              </Radio.Group>
              </Form.Item>
              <Form.Item label='评分'>
              <Radio.Group >
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio> 
              </Radio.Group>
              </Form.Item>
              <Form.Item label='补交'>
              <Radio.Group >
                <Radio value={1}>实习结束后可以补交</Radio>
                <Radio value={2}>实习结束后不可补交</Radio> 
              </Radio.Group>
              </Form.Item>
            </div>
            <div className={styles.log}>
              <h3>周志</h3>
              <Form.Item > 
                  <span>字数限制:不少于<Input/>字</span>
              </Form.Item>
              <Form.Item>
                <span>篇数限制:每
                  <Select>
                    <Option value='天'>天</Option>
                    <Option value='周'>周</Option>
                    <Option value='月'>月</Option>
                  </Select>
                  至少提交<Input/>篇
                  </span>
              </Form.Item>
              <Form.Item label='评语'>
              <Radio.Group >
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio> 
              </Radio.Group>
              </Form.Item>
              <Form.Item label='评分'>
              <Radio.Group >
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio> 
              </Radio.Group>
              </Form.Item>
              <Form.Item label='补交'>
              <Radio.Group >
                <Radio value={1}>实习结束后可以补交</Radio>
                <Radio value={2}>实习结束后不可补交</Radio> 
              </Radio.Group>
              </Form.Item>
            </div>
            <div className={styles.log}>
              <h3>月志</h3>
              <Form.Item > 
                  <span>字数限制:不少于<Input/>字</span>
              </Form.Item>
              <Form.Item>
                <span>篇数限制:每
                  <Select>
                    <Option value='天'>天</Option>
                    <Option value='周'>周</Option>
                    <Option value='月'>月</Option>
                  </Select>
                  至少提交<Input/>篇
                  </span>
              </Form.Item>
              <Form.Item label='评语'>
              <Radio.Group >
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio> 
              </Radio.Group>
              </Form.Item>
              <Form.Item label='评分'>
              <Radio.Group >
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio> 
              </Radio.Group>
              </Form.Item>
              <Form.Item label='补交'>
              <Radio.Group >
                <Radio value={1}>实习结束后可以补交</Radio>
                <Radio value={2}>实习结束后不可补交</Radio> 
              </Radio.Group>
              </Form.Item>
            </div>
  
          </Form>
          <Form.Item>
            <div className={styles.stepOneAction}> 
              <Button onClick={() => handleNext('3')} type="primary" className={styles.next}>
                下一步
              </Button>
            </div>
          </Form.Item>
        </TabPane>
        <TabPane key="3" tab="设置项目">
          <Form> 
            <Button ></Button>
             <Table
                rowKey="id"
                columns={columns}
                dataSource={dataSource} 
              /> 
            <Form.Item>
              <div  className={styles.stepOneAction}>
                <Button type="primary">发布项目</Button>
                <Button onClick={() => handleNext('1')} className={styles.cancel}>取消</Button>
              </div>
            </Form.Item>
          </Form>
        </TabPane>
      </Tabs>
    </Modal>
  );
};

export default CreateForm;
